<template>

	<div class="Order">
		<van-card v-if="dis">
			<div slot="price" class="denglu">
				<van-button type="primary" block color="#000000" @click="login">登录</van-button>
			</div>
		</van-card>
		<van-card v-else>
			<div slot="thumb"><img src="../assets/images/home/2023.png" class="thumb-img" /></div>
			<div slot="title" class="bt">{{titleName}}~嗨</div>
			<div slot="desc" class="ms">ID:2018404242</div>
			<div slot="price" class="bianj">
				<van-button color="#000000" size="small" @click="bianji">编辑资料</van-button>
			</div>
		</van-card>
		<div class="xian"></div>
		<div class="cellBxo">
			<van-cell-group>	
				<van-cell  is-link  size="large" to="/historys">
				  <div slot="icon" class="icon" ><van-icon name="clock-o" /></div>
				  <div slot="title" class="title" >我的浏览记录</div>
				</van-cell>
				<van-cell  is-link  size="large" to="/favorites">
				  <div slot="icon" class="icon" ><van-icon name="hot-o" /></div>
				  <div slot="title" class="title">收藏夹</div>
				</van-cell>
				<van-cell  is-link  size="large" to="/address">
				  <div slot="icon" class="icon"><van-icon name="setting-o" /></div>
				  <div slot="title" class="title">地址设置</div>
				</van-cell>
				<van-cell  is-link  size="large">
				  <div slot="icon" class="icon"><van-icon name="service-o" /></div>
				  <div slot="title" class="title">联系客服</div>
				</van-cell>
				
				<van-cell  is-link  size="large">
				  <div slot="icon" class="icon"><van-icon name="question-o" /></div>
				  <div slot="title" class="title">帮助中心</div>
				</van-cell>
				
				
			</van-cell-group>
		</div>
		<div class="tuchu" v-if="!dis">
			<van-button type="primary" block color="#000000" @click="tuichu">退出登录</van-button>
		</div>
		<!-- 底部导航 -->
		<tab-bar>
			<tab-bar-item path="/home">
				<img src="../assets/images/tabbar/home.png" slot="item-icon" />
				<img src="../assets/images/tabbar/home_selected.png" slot="item-select-icon" />
				<div slot="item-text">首页</div>
			</tab-bar-item>
			<tab-bar-item path="/about">
				<img src="../assets/images/tabbar/index.png" slot="item-icon" />
				<img src="../assets/images/tabbar/index_selected.png" slot="item-select-icon" />
				<div slot="item-text">购物车</div>
			</tab-bar-item>
		
			<tab-bar-item path="/order">
				<img src="../assets/images/tabbar/order.png" slot="item-icon" />
				<img src="../assets/images/tabbar/order_selected.png" slot="item-select-icon" />
				<div slot="item-text">订单</div>
			</tab-bar-item>
		
			<tab-bar-item path="/my">
				<img src="../assets/images/tabbar/my.png" slot="item-icon" />
				<img src="../assets/images/tabbar/my_selected.png" slot="item-select-icon" />
				<div slot="item-text">我的</div>
			</tab-bar-item>
		</tab-bar>
			
	</div>

</template>
<script>
	import {Card} from 'vant';
	import {Button} from 'vant';
	import {Cell,CellGroup} from 'vant';
	import {Icon} from 'vant';
	import {Tag} from 'vant';
	// 引入tabbar组件
	import TabBar from '../components/tabbar/TabBar.vue'
	import TabBarItem from '../components/tabbar/TabBarItem.vue'
	export default {
		data(){
			return{
				dis:'',
				titleName:''
			}
		},
		components: {
			[Card.name]: Card,
			[Button.name]: Button,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Icon.name]: Icon,
			[Tag.name]: Tag,
			TabBar,
			TabBarItem
		},
		created() {
			this.dis=!localStorage.getItem('globalData')
			//记得使用JSON.parse把 取过来的缓存数据转为字符串
			if(localStorage.getItem('globalData')){
				this.titleName=JSON.parse(localStorage.getItem('globalData')).username
			}else{
				return
			}
		},
		methods:{
			bianji(){
				  this.$router.push({path:'/modifymy'})
			},
			login(){
				this.$router.push({path:'/login'})
			},
			// 退出登录
			tuichu(){
				localStorage.removeItem('globalData')
				this.$router.go(0)
			},
		
		}
	}
</script>
<style lang="less" scoped>
	@width: 100vw;
	@display: flex;
	@margin: 0 auto;
	@wid90: 90vw;

	.Order {
		width: @width;
		height: 100vh;
        .denglu{width: 30vh;margin-left: 60px;}
		.van-card {
			background: #ffffff;
			height: 150px;

			.thumb-img {
				width: 130px;
				height: 120px;
			}
			

			.bt {
				margin-left: 60px;
				font-size: 20px;
				font-weight: bold;
				font-family: '黑体';
				margin-top: 5px;
			}

			.ms {
				margin-left: 60px;
				margin-top: 10px;
				color: #999999;
			}

			.bianj {
				margin-left: 60px;
				margin-top: 20px;
			}
		}
           .xian{width: @width;height: 10px;background-color:#F1F1F1 ;}
		.cellBxo {
			width: @width;
			height: 300px;
			background-color: #ffffff;
			margin-top: 10px;
		}
		
		 title {
		    margin-right: 10px;
		    vertical-align: middle;
			font-size: 23px;
		  }
		
		  .icon {
		    font-size: 23px;
		    line-height: inherit;
			padding-right: 10px;
		  }

	}
	.tuchu{width: 50vw;margin:0px auto;}
	
</style>
